@import './_variable.scss';
.container {
	background:#ffffff;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.body{
  display:flex;
  font-size: 26rpx;
  .left{
    width:14%;
    .time-title{
      height: 80rpx;
      background-color: #fafafa;
    }
    .time-area{
      width:100%;
      text-align: center;      
      background:#fafafa;
      margin-top:-16rpx;
    }
    .time-item{
      height:99.5rpx;
      padding-bottom:0.5rpx;
    }
  }
  .right{
    width:86%;
    .title{
      white-space:nowrap;
      width:100%;
      overflow:hidden;
      height:80rpx;
      border:1px solid #f1f1f1;      
    }
    .title-item{
      display:inline-block;
      width:200rpx;
      margin-top:20rpx;
      text-align:center;
    }
    .data{
      width:100%;
      white-space:nowrap;
    }     
    .data-item{
      background-color: #f1f1f1;
      border-right:10rpx solid #fafafa;
      border-bottom:1px solid #ddd;
      height: 99rpx;
    }
    .active-book{
      border: 5rpx solid #f58220;
      z-index:1;
    }
    .col{
      display:inline-block;
      width:200rpx;
      height:80rpx;
    }
  }
}

.activity-or-brand {
  display: -webkit-box;
  display: flex;
  background: #fff;
  justify-content: space-around;
}
.activity-or-brand > text {
  position: relative;
  padding: .5rem 1rem;
  width: 45%;
  text-align: center;
  margin: 0 1rem;
}
.activity-or-brand > text:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  bottom: 0;
  border-bottom: 2px solid #666666;
  -webkit-transition: .3s;
  transition: .3s;
}
.activity-or-brand > .active {
  font-weight: bold;
}
.activity-or-brand > .active:after {
  left: 0;
  width: 100%;
}

.date-choose {
  display: flex;
  background: #fff;
  overflow: hidden;
  font-size: .8em;
  height: 105rpx;
}
.data-month {
  width: 14%;
  align-items: center;
  padding: .5rem 0;
  text-align: center;
  box-shadow: 2px 0 5px rgba(0,0,0,.4);
  background-color: #fafafa;
}
.date-choose-swiper {
  flex-grow: 1;
  height: 100%;
}
.swiper-item {
  display: flex;
  flex-direction: column;
}
.weekday{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  font-size:24rpx;
  padding-top: 4rpx;
}
.dateday {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  font-size:28rpx;
  padding-bottom:6rpx;
}
.week, .day {
  width: 14.286%;
  flex-basis: 14.286%;
}
.day text {
  position: relative;
}
.day .active:before {
  content: "";
  position: absolute;
  width: 45rpx;
  height: 45rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 2px solid rgb(49, 120, 228);
  border-radius: 10rpx;
}

.calendar-container .grid .wrap.select {
  background: rgb(49, 120, 228);
  border-radius: 10rpx;
  color: #fff;
  width: 80%;
  margin: 0 auto;
}

.main-list {
  background: #fff;
  margin-top: .5rem;
  padding: .5rem;
}
.main-list .list-item {
  border: 1px solid #ddd;
}
.main-list .list-item:not(:first-child) {
  margin-top: .5rem;
}
.main-list .list-content {
  position: relative;
  padding: .3rem .5rem;
}
.main-list .list-title {
    word-wrap: normal;
  font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  padding-right: 7.5rem;
}
.main-list .list-time {
  font-size: .8em;
  margin-top: .2em;
  text-align: right;
  position: absolute;
  right: .5rem;
  bottom: .3rem;
  width: 12em;
}


.brand-list .list-item {
  padding: .5rem .6rem .3rem;
}
.item:not(:first-child) {
    margin-top: .5rem;
}
.item-img {
    width: 4em;
    height: 4em;
    border: 1px solid #000;
    border-radius: .3rem;
}
.item-name {
    color: #989495;
    margin-top: -3em;
    margin-left: 5.2em;
}
.item-word {
    margin: 1.8rem 0 .2rem;
}
.item-time {
    text-align: right;
    color: #f24f74;
}

.list-item {
  position: relative;
}
.timeState {
  position: absolute;
  z-index: 1;
  top: .3rem;
  right: .2rem;
  padding: .2rem .5rem;
  background: pink;
  font-size: .8em;
  border-radius: 1000px;
  color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}

.ctrl {
  display: inline-block;
  padding: 2rpx 20rpx;
  background: #e1e1e1;
  border-radius: 5rpx;
  margin-top: 10rpx;
}
